<template>
  <FormView not-form form-width="100%">
    <MarkdownEditor
      ref="md"
      v-model="content"
      style="min-height: 600px"
      @change="change"
      @save="save"
      @imgAdd="imgAdd" />
  </FormView>
</template>

<script>
  import { upload } from '@/http'
  import { MarkdownEditor } from '@/components/markdown-editor'

  export default {
    name: 'MarkdownDemo',
    components:{
      MarkdownEditor
    },
    data() {
      return {
        content: '',
        html: ''
      }
    },
    methods: {
      // 将图片上传到服务器，返回地址替换到md中
      async imgAdd(position, $file) {
        const res = await upload('', $file, {})
        // 更新编辑器中的图片地址
        this.$refs.md.$img2Url(position, res.data.url)
      },
      change(value, render) {
        // render 为 markdown 解析后的结果
        this.html = render
      },
      save() {
        // console.log(this.content)
        // console.log(this.html)
        this.$message.success('保存成功！')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .editor-btn {
    margin-top: 20px;
  }
</style>
